<template>
	<view class="container">
		<!-- 行程信息卡片 -->
		<view class="trip-card">
			<view class="card-content">
				<view class="route-info">
					<view class="route-item">
						<view class="route-dot start-dot"></view>
						<text class="route-text">{{ currentTripDetails.order.line.start.name || '起点' }}·{{ currentTripDetails.order.line.start_location || '起点' }}</text>
					</view>
					<view class="route-item">
						<view class="route-dot end-dot"></view>
						<text class="route-text">{{ currentTripDetails.order.line.end.name || '终点' }}·{{ currentTripDetails.order.line.end_location || '终点' }}</text>
					</view>
				</view>

				<view class="trip-details">
					<view class="detail-item">
						<image src="/static/home/time-icon.png" class="detail-icon"></image>
						<text class="detail-label">时间</text>
						<text class="detail-text">{{ currentTripDetails.order.line.start_time || '未设置' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-icon-text">¥</text>
						<text class="detail-label">价格</text>
						<text class="detail-text">{{ currentTripDetails.order.amount || '0' }}</text>
					</view>
					<view class="detail-item">
						<image src="/static/home/car.png" class="detail-icon"></image>
						<text class="detail-label">订座/余座</text>
						<text class="detail-text">{{ currentTripDetails.order.line.on_order }}人/{{ currentTripDetails.order.line.current_seats }}人</text>
					</view>
				</view>
			</view>

			<!-- 定位按钮 -->
			<!-- <view class="action-btn forward positioned-btn top-right" @click="showShare(currentTripDetails.order.line)">
				转发行程
			</view>
			<view class="action-btn modify positioned-btn bottom-right" @click="navigateTo('/pages/personalCenter/trip/reviseTrip?id=' + currentTripId)">
				修改行程
			</view> -->
		</view>

		<!-- 乘客信息 -->
		<view class="passenger-section">
			<view class="section-header">
				<text class="section-title" style="margin-bottom: 0">乘客信息[{{ currentTripDetails.order.seats || 1 }}人]</text>
				<!-- <view class="evaluate-btn" @click="navigateTo('/pages/personalCenter/trip/tripEvaluate?id=' + currentTripId)">
					评价
				</view> -->
			</view>

			<view class="passenger-list">
				<view class="passenger-item">
					<view class="passenger-info">
						<text class="passenger-name">当前用户</text>
						<text class="passenger-status" v-if="currentTripDetails.order.status == 1">(行程结束,电话隐藏)</text>
						<text class="passenger-status" v-else-if="currentTripDetails.order.status == 2">(已退订)</text>
						<text class="passenger-status" v-else>(进行中)</text>
					</view>
					<view class="passenger-details">
						<text class="detail-label">预订数:</text>
						<text class="detail-value">{{ currentTripDetails.order.seats || 1 }}人</text>
					</view>
					<view class="passenger-details">
						<text class="detail-label">上车点(留言):</text>
						<text class="detail-value">{{ currentTripDetails.order.boarding_location || '未指定' }}</text>
					</view>
					<view class="passenger-details" v-if="currentTripDetails.order.created_at">
						<text class="detail-label">预订时间:</text>
						<text class="detail-value">{{ formatDateTime(currentTripDetails.order.created_at) }}</text>
					</view>
					<view class="passenger-details" v-if="currentTripDetails.order.amount">
						<text class="detail-label">订单金额:</text>
						<text class="detail-value">¥{{ currentTripDetails.order.amount }}</text>
					</view>
					<view class="passenger-details" v-if="currentTripDetails.order.coupon_amount && currentTripDetails.order.coupon_amount != '0.00'">
						<text class="detail-label">优惠券:</text>
						<text class="detail-value">-¥{{ currentTripDetails.order.coupon_amount }}</text>
					</view>
					<view class="passenger-details" v-if="currentTripDetails.order.status_text">
						<text class="detail-label">订单状态:</text>
						<text class="detail-value status-text" :class="'status-' + currentTripDetails.order.status">{{ currentTripDetails.order.status_text }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 价格信息 -->
		<view class="price-details">
			<view class="price-row">
				<text class="price-label">订座总额</text>
				<text class="price-value">¥{{ currentTripDetails.order.amount || '0' }}</text>
			</view>
			<view class="divider"></view>
			<view class="price-row">
				<text class="price-label">优惠券</text>
				<text class="price-value">-¥{{ currentTripDetails.order.coupon_amount || '0' }}</text>
			</view>
			<view class="divider"></view>
			<view class="price-row">
				<text class="price-label">乘客需支付总额</text>
				<text class="price-value">¥{{ currentTripDetails.order.payment_amount || '0' }}</text>
			</view>
		</view>

		<!-- 车主信息 -->
		<view class="driver-section">
			<view class="section-title">车主</view>
			<view class="driver-info">
				<text class="driver-name">{{ currentTripDetails.order.line.real_name || '未知' }}</text>
				<text class="driver-phone" @click="callPhone(currentTripDetails.order.line.phone)">{{ currentTripDetails.order.line.phone || '未知' }}</text>
				<image src="/static/callout.png" class="callout-icon"></image>
				<text class="driver-phone-tips">(请尽快与车主确认行程)</text>
			</view>
			<view class="divider"></view>
			<view class="section-title car-model">出行车辆</view>
			<view class="car-info">
				<text class="driver-name">{{ currentTripDetails.order.line.brand_model || '未知车型' }} {{ currentTripDetails.order.line.seats || 0 }}座</text>
				<view class="car-type" :class="{ 'car-type-gray': currentTripDetails.order.line.carOwnerType == '非营运' }">
					<image v-if="currentTripDetails.order.line.carOwnerType == '非营运'" class="car-icon" src="/static/home/no-car.png" mode="aspectFill"></image>
					<image v-else class="car-icon" src="/static/personalCenter/car.png" mode="aspectFill"></image>
					<text class="car-type-name">{{ currentTripDetails.order.line.carOwnerType || '未知' }}</text>
				</view>
			</view>
		</view>

		<!-- 评价信息 -->
		<view class="evaluate-section" v-for="(ev, index) in currentTripDetails.evaluates" :key="index">
			<view class="evaluate-title">
				<text>我的评价</text>
				<image v-if="ev.type == 1" class="evaluate-icon" src="/static/personalCenter/zan.png" mode="aspectFill"></image>
				<image v-else class="evaluate-icon" src="/static/personalCenter/bad.png" mode="aspectFill"></image>
			</view>
			<view class="evaluate-info">
				<text>{{ ev.content }}</text>
			</view>
		</view>

		<!-- 投诉信息 -->
		<view class="evaluate-section" v-for="(com, index) in currentTripDetails.complaints" :key="index">
			<view class="evaluate-title">
				<text>我的投诉</text>
				<text class="evaluate-time">{{ com.created_at }}</text>
			</view>
			<view class="evaluate-info">
				<text>{{ com.content }}</text>
			</view>
		</view>

		<!-- 退订原因信息 -->
		<view class="evaluate-section">
			<view class="evaluate-title">
				<text>退订原因-{{ getCancelReasonType }}</text>
			</view>
			<view class="evaluate-info">
				<text>{{ currentTripDetails.order.cancel_reason || '暂无' }}</text>
			</view>
		</view>

		<!-- 行程进行中 操作按钮 -->
		<view class="action-buttons" v-if="currentTripDetails.order.status == 0">
			<view class="action-btn share" @click.stop="showShare(currentTripDetails.order.line)">
				<image class="share-icon" src="/static/personalCenter/share-icon.png" mode="aspectFill"></image>
				转发分享
			</view>
			<view class="action-btn cancel" @click="handleCancel">退定座位</view>
		</view>

		<!-- 行程已完成 操作按钮 -->
		<view class="action-buttons">
			<view class="action-btn share" v-if="currentTripDetails.order.status != 0" @click="navigateTo('/pages/personalCenter/trip/tripComplain?id=' + currentTripId)">
				我要投诉
			</view>
			<view class="action-btn cancel" v-if="currentTripDetails.order.status == 1" @click="navigateTo('/pages/personalCenter/trip/tripEvaluate?id=' + currentTripId)">
				我要评价
			</view>
		</view>

		<!-- 温馨提示 -->
		<view class="tips-section">
			<view class="tips-text">温馨提示：</view>
			<view class="tips-text">
				1. 免费取消时限：出发前1小时以上包括1个小时可通过平台操作取消，超时或出发后将进行有责退订。
				<br />
				<view class="tips-text" style="text-indent: 2ch">- 特殊情况（如车主迟到/车辆故障）：可在平台申诉。</view>
				<view class="title-text" style="text-indent: 2ch">- 频繁取消（如3次以上未及时付费）可能影响诚信值和推广台的使用。</view>
				2.出发时间一经确认，双方均不可单方更改；若需调整，平台将提前通知，乘客和车主再协商出发时间，或者退订；
				<br />
				3.乘客迟到超过10分钟，车主有权取消订单且进行申诉；
				<br />
				4.建议提前10分钟到达上车点，避免延误。
				<br />
				5.行车途中请系好安全带，勿干扰驾驶员；
				<br />
				6.若发生纠纷，请保留证据（如聊天记录、车牌号）并联系平台介入。
				<br />
				<view class="tips-text" style="margin-bottom: 1em"></view>
				**祝您旅途愉快！如有疑问，请联系客服。
			</view>
		</view>
		<!-- -->
		<!-- 位置聊天 -->
		<view class="chat-center" v-if="currentTripDetails.order.status == 0">
			<image
				@touchstart.stop.prevent="onTouchStart"
				@touchmove.stop.prevent="onTouchMove"
				@touchend.stop.prevent="onTouchEnd"
				:style="{ transform: `translateY(${bottom}px)` }"
				class="chat-cion"
				src="/static/personalCenter/chat-icon.png"
			></image>
		</view>

		<!-- 分享引导蒙层 -->
		<share-guide :show.sync="showGuide" :shareData="shareData"></share-guide>
	</view>
</template>

<script>
import shareGuide from '../../common/ShareGuide.vue';
import { formatDateTime } from '@/utils/dateTimeFormatter.js';
export default {
	components: {
		shareGuide
	},
	data() {
		return {
			bottom: 0,
			isDragging: false,
			startX: 0,
			startY: 0,

			showGuide: false,
			shareData: {
				title: '拼车出行，绿色环保',
				desc: '发现更多拼车路线，省钱又环保',
				link: '',
				imageUrl: 'https://api.mszcdf.cn/storage/share.png'
			},
			statusText: {
				0: '进行中',
				1: '已完成',
				2: '已退订'
			},

			statusBg: {
				0: '#4E84FF',
				1: '#00CFAB',
				2: '#AFB5BE'
			},
			currentTripId: null,
			currentTripDetails: {},
			platform: '',
			options: {}
		};
	},
	computed: {
		getCancelReasonType() {
			if (this.currentTripDetails.order.cancel_reason_type == 1) {
				return '我的原因';
			}
			if (this.currentTripDetails.order.cancel_reason_type == 2) {
				return '车主原因';
			}
			return '';
		}
	},
	onShow: function (options) {
		console.log(1, 'onShow 乘客行程详情', this.options);
		// 获取当前设备信息
		const systemInfo = uni.getSystemInfoSync();
		this.platform = systemInfo.platform;
		//如果是ios 则刷新页面，解决分享失败问题
		if (this.platform === 'ios' && !sessionStorage.getItem('hasReloaded')) {
			sessionStorage.setItem('hasReloaded', '1');
			location.reload();
			return;
		}
		sessionStorage.removeItem('hasReloaded');

		this.currentTripId = this.options.id;
		if (this.options.pid) {
			uni.setStorageSync('pid', this.options.pid);
		}
		this.getPassengerTripDetails();
	},
	onLoad(options) {
		this.options = options;
	},
	methods: {
		onTouchEnd() {
			const time = new Date().getTime();

			if (time - this.time < 500) this.onChat();

			this.isDragging = false;
		},
		onTouchStart(event) {
			// 记录初始触摸点位置等信息
			const touch = event.touches[0];
			this.startX = touch.pageX;
			this.startY = touch.pageY;
			this.isDragging = true;

			this.oB = this.bottom;

			console.log(this.oB);

			this.time = new Date().getTime();
		},
		onTouchMove(event) {
			if (this.isDragging) {
				// 阻止页面滚动
				event.preventDefault();

				// 计算移动距离
				const touch = event.touches[0];
				const offsetX = touch.pageX - this.startX;
				const offsetY = touch.pageY - this.startY;
				// 移动元素

				this.bottom = this.oB + offsetY;
			}
		},
		onChat() {
			if (this.currentTripDetails.order.line) {
				uni.setStorageSync('lineOrders', [this.currentTripDetails.order.line]);

				this.navigateTo(
					'/pages/personalCenter/trip/locationChat?lid=' +
						(this.currentTripDetails.order.line.id || '') +
						'&carOwnerUid=' +
						(this.currentTripDetails.order.line.uid || '') +
						'&type=' +
						'passenger' +
						'&carOwnerName=' +
						(this.currentTripDetails.order.line.phone || '')
				);
			}
		},
		handleCancel() {
			uni.showModal({
				title: '提示',
				content: '确定要退订吗？',
				success: (res) => {
					if (res.confirm) {
						this.navigateTo('/pages/personalCenter/trip/retirementSeat?id=' + this.currentTripId);
					}
				}
			});
		},
		// 拨号
		callPhone(phoneNumber) {
			this.$makePhoneCall(phoneNumber, {
				success: () => {
					// uni.showToast({ title: '正在拨号...', icon: 'none' });
				},
				fail: (err) => {
					uni.showToast({ title: '拨号失败: ' + err.errMsg, icon: 'none' });
				}
			});
		},
		// 显示分享弹窗
		showShare(data) {
			this.showGuide = true;
		},
		async getPassengerTripDetails() {
			try {
				const res = await this.$http.get(`/h5/user/trip/passengerDetail/${this.currentTripId}`);
				this.currentTripDetails = res.data;
				if (this.currentTripDetails.order.line.start_time) {
					this.currentTripDetails.order.line.start_time = formatDateTime(this.currentTripDetails.order.line.start_time);
				}
			} catch (error) {
				console.error('获取行程详情失败:', error);
			}
		},
		// 导航到指定页面
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 格式化日期时间
		formatDateTime(dateTime) {
			return formatDateTime(dateTime);
		}
	}
};
</script>

<style scoped>
/* 行程信息卡片样式 */
.trip-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx 20rpx;
	margin: 20rpx 26rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	position: relative;
}

.card-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.role-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 10rpx;
}

.role-icon {
	width: 24rpx;
	height: 24rpx;
}

.role-text {
	font-size: 24rpx;
	color: #333333;
}

.route-info {
	padding-right: 140rpx;
}

.route-item {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.route-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	margin-right: 15rpx;
}

.start-dot {
	background-color: #ff3f39;
}

.end-dot {
	background-color: #00cfab;
}

.route-text {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
}

.trip-details {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
	margin-top: 0;
	padding-top: 15rpx;
	border-top: 1rpx solid #f0f0f0;
}

.detail-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.detail-icon {
	width: 24rpx;
	height: 24rpx;
	filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(330deg) brightness(118%) contrast(101%);
}

.detail-icon-text {
	font-size: 24rpx;
	color: #ff7937;
	width: 24rpx;
	text-align: center;
}

.detail-label {
	font-size: 24rpx;
	color: #999999;
	margin-right: 8rpx;
}

.detail-text {
	font-size: 26rpx;
	color: #333333;
}

.action-btn {
	padding: 10rpx 20rpx;
	border-radius: 6rpx;
	font-size: 24rpx;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	width: 120rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.forward {
	background-color: #ffffff;
	color: #ff7937;
	border: 1rpx solid #ff7937;
}

.modify {
	background-color: #ff7937;
	color: #ffffff;
	border: 1rpx solid #ff7937;
}

/* 定位按钮样式 */
.positioned-btn {
	position: absolute;
	font-size: 24rpx;
	border-radius: 6rpx;
	z-index: 10;
	height: auto;
	padding: 14rpx 20rpx !important;
}

.top-right {
	top: 20rpx;
	right: 20rpx;
}

.bottom-right {
	bottom: 20rpx;
	right: 20rpx;
}

/* 乘客信息样式 */
.passenger-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	margin: 20rpx 26rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
}

.evaluate-btn {
	background-color: #ffffff;
	color: #666666;
	padding: 8rpx 20rpx;
	border: 1rpx solid #ddd;
	border-radius: 4rpx;
	font-size: 24rpx;
}

.passenger-list {
}

.passenger-item {
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.passenger-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.passenger-info {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.passenger-number {
	background-color: #ff7937;
	color: #ffffff;
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	margin-right: 15rpx;
}

.passenger-name {
	font-size: 28rpx;
	color: #333333;
	margin-right: 10rpx;
}

.passenger-status {
	font-size: 24rpx;
	color: #999999;
}

.passenger-details {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
	line-height: 1.8;
}

.detail-label {
	font-size: 24rpx;
	color: #999999;
}

.detail-value {
	font-size: 24rpx;
	color: #333333;
}

/* 操作按钮样式 */
.action-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	text-align: center;
	padding: 26rpx 0;
	border-radius: 16rpx;
}

.share {
	background-color: #fff;
	color: #666666;
}

.cancel {
	background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
	color: #fff;
	margin-left: 20rpx;
}

.share-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 16rpx;
}

/* 价格明细样式 */
.price-details {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 0rpx 20rpx 0rpx 20rpx;
	margin: 20rpx 26rpx;
}

.price-row {
	display: flex;
	justify-content: space-between;
	padding-top: 34rpx;
	padding-bottom: 34rpx;
}

.price-label {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 28rpx;
	color: #0b1f20;
}

.price-value {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 28rpx;
}

/* 车主信息样式 */
.driver-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 36rpx 20rpx 50rpx 20rpx;
	margin: 20rpx 26rpx;
}

.section-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #0b1f20;
	margin-bottom: 32rpx;
}

.driver-info {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}

.driver-name {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #0b1f20;
}

.driver-phone {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #0b1f20;
	padding-left: 56rpx;
}

.driver-phone-tips {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 24rpx;
	color: #999999;
}

.car-info {
	display: flex;
	align-items: center;
}

.car-type {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88rpx;
	height: 32rpx;
	border-radius: 4rpx;
	border: 1rpx solid rgba(255, 121, 55, 0.5);
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 20rpx;
	color: #ff7937;
	margin-left: 10rpx;
}

.car-type-gray {
	color: #999999;
	border: 1rpx solid #999999;
}

.car-icon {
	width: 19rpx;
	height: 16rpx;
	padding-right: 4rpx;
}

.car-model {
	padding-top: 22rpx;
}

.divider {
	height: 2rpx;
	background-color: #eee;
}

/* 评价样式 */
.evaluate-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 36rpx 20rpx 50rpx 20rpx;
	margin: 20rpx 26rpx;
}

.evaluate-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #666666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
}

.evaluate-time {
	color: #999999;
}

.evaluate-icon {
	width: 40rpx;
	height: 40rpx;
}

.evaluate-info {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 30rpx;
	color: #0b1f20;
	line-height: 48rpx;
}

/* 操作按钮样式 */
.action-buttons {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 26rpx;
}

.action-btn {
	flex: 1;
	text-align: center;
	padding: 26rpx 0;
	border-radius: 16rpx;
}

.share {
	background-color: #fff;
	color: #666666;
}

.cancel {
	background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
	color: #fff;
	margin-left: 20rpx;
}

.share-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 16rpx;
}

/* 温馨提示样式 */
.tips-section {
	padding: 20rpx 64rpx;
}

.tips-text {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 48rpx;
}

/* 位置聊天样式 */
.chat-center .chat-cion {
	width: 128rpx;
	height: 128rpx;
	position: fixed;
	right: 0;
	bottom: 500rpx;
}

.callout-icon {
	width: 40rpx;
	height: 40rpx;
}

.callout-icon-small {
	width: 24rpx;
	height: 24rpx;
	margin-left: 8rpx;
}

.phone-number {
	color: #ff7937;
	text-decoration: underline;
}

.status-text {
	font-weight: 500;
}

.status-0 {
	color: #4e84ff;
}

.status-1 {
	color: #00cfab;
}

.status-2 {
	color: #afb5be;
}
</style>
